<template>
  <div>
    <van-nav-bar :title="`${currentComment.reply_count}条回复`">
      <van-icon
        slot="left"
        name="cross"
        @click="$emit('click-close')"
      />
    </van-nav-bar>

    <div class="content-wrap">
      <article-val
        :list="[currentComment]"
      />

      <van-cell title="所有回复" />

      <article-item
        type="c"
        :articleId="currentComment.com_id"
      />
    </div>

    <div class="bottom-wrap">
      <van-button type="default" size="small" round block @click="isPostShow = true">发表评论</van-button>
    </div>

    <van-popup
      v-model="isPostShow"
      position="bottom"
    >
      <!-- 1. 评论组件 提供 评论的 id -->
      <article-post
        :target="currentComment.com_id"
        @changeShow="isPostShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import ArticleVal from '@/components/article-item/article-val.vue'
import ArticleItem from '@/components/article-item/index.vue'
import ArticlePost from '@/components/article-post'

export default {
  components: {
    ArticleVal,
    ArticleItem,
    ArticlePost
  },
  props: ['currentComment'],
  data() {
    return {
      isPostShow: false
    }
  }
}
</script>

<style scoped>
.content-wrap {
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  bottom: 88px;
  overflow-y: auto;
}

.bottom-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 88px;
  border-top: 2px solid #ccc;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
}
</style>
